<template>
  <div class="base-platform">
    <Box title="基础平台">
      <div class="main">
        <div class="row">
          <div class="item">
            <div class="head">
              <div class="img-wrap">
                <img src="@/assets/longscreen3/base_1.png" class="img" alt="" />
              </div>
              <p class="key">平台累计PV量</p>
            </div>
            <div class="data l">
              <count-to
                class="val"
                :startVal="0"
                :endVal="pv"
                :duration="1000"
              ></count-to>
              <span class="unit">人次</span>
            </div>
          </div>
          <div class="item right">
            <div class="head right">
              <p class="key">认证企业数</p>
              <div class="img-wrap">
                <img src="@/assets/longscreen3/base_2.png" class="img" alt="" />
              </div>
            </div>
            <div class="data r">
              <count-to
                class="val"
                :startVal="0"
                :endVal="compCount"
                :duration="1000"
              ></count-to>
              <span class="unit">家</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item">
            <div class="head">
              <div class="img-wrap">
                <img src="@/assets/longscreen3/base_3.png" class="img" alt="" />
              </div>
              <p class="key">注册用户数</p>
            </div>
            <div class="data l">
              <count-to
                class="val"
                :startVal="0"
                :endVal="userCount"
                :duration="1000"
              ></count-to>
              <span class="unit">位</span>
            </div>
          </div>
          <div class="item right">
            <div class="head right">
              <p class="key">小程序用户数</p>
              <div class="img-wrap">
                <img src="@/assets/longscreen3/base_4.png" class="img" alt="" />
              </div>
            </div>
            <div class="data r">
              <count-to
                class="val"
                :startVal="0"
                :endVal="studentCount"
                :duration="1000"
              ></count-to>
              <span class="unit">位</span>
            </div>
          </div>
        </div>
        <div class="line1"></div>
        <div class="line2"></div>
        <img src="@/assets/longscreen3/base_5.png" alt="" class="mid-img" />
      </div>
    </Box>
  </div>
</template>
    
<script setup>
import Box from "./box.vue";
import { ajax } from "@/store/service";
import { ref, onMounted, onUnmounted } from "vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";

const pv = ref(0);
const compCount = ref(0);
const userCount = ref(0);
const studentCount = ref(0);

const init = async() => {
  const [res]=await ajax.basePlatform()
  pv.value=res.pv
  compCount.value=res.compCount
  userCount.value=res.userCount
  studentCount.value=res.studentCount
};
onMounted(() => {
  init();
});


</script>

<style scoped lang='scss'>
.base-platform {
  .main {
    height: 382px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 45px;
    box-sizing: border-box;
    position: relative;
    .row {
      height: 120px;
      display: flex;

      .item {
        width: 260px;
        height: 120px;
        display: flex;
        flex-direction: column;
        background: linear-gradient(
          90deg,
          rgba(44, 64, 107, 0.2) 0%,
          rgba(44, 64, 107, 0) 100%
        );
        &:last-child {
          background: linear-gradient(
            90deg,
            rgba(44, 64, 107, 0) 0%,
            rgba(44, 64, 107, 0.2) 100%
          );
        }
        .head {
          height: 44px;
          background: linear-gradient(
            90deg,
            #21335c 0%,
            rgba(33, 51, 92, 0) 100%
          );
          display: flex;
          align-items: center;
          .img-wrap {
            display: flex;
            padding: 0 14px;
            .img {
              height: 23px;
              margin: auto;
            }
          }
          .key {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: bold;
            font-size: 18px;
            color: #c1ddff;
            line-height: 27px;
            letter-spacing: 1px;
            text-align: center;
            font-style: normal;
          }
        }
        .right {
          background: linear-gradient(
            90deg,
            rgba(33, 51, 92, 0) 0%,
            #21335c 100%
          );
          display: flex;
          .key {
            margin-left: auto;
            margin-right: 12px;
          }
        }
        .data {
          flex: 1;
          display: flex;
          align-items: center;
          .val {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 26px;
            color: #ffffff;
            line-height: 26px;
            text-shadow: 0px 0px 7px rgba(53, 101, 223, 0.82);
            text-align: center;
            font-style: normal;
          }
          .unit {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 18px;
            color: #c1ddff;
            line-height: 27px;
            text-align: center;
            font-style: normal;
            margin: 0 4px;
          }
        }
        .l{
          padding-left: 54px;
        }
        .r{
          justify-content: flex-end;
          padding-right: 60px;
        }
      }
    }
    .line1 {
      position: absolute;
      top: 195px;
      width: 592px;
      height: 1px;
      border-top: 1px solid;
      border-image: linear-gradient(
          270deg,
          rgba(200, 200, 200, 0),
          rgba(245, 245, 245, 0.3),
          rgba(151, 151, 151, 0)
        )
        1 1;
    }
    .line2 {
      position: absolute;
      top: 20px;
      width: 1px;
      height: 330px;
      border-left: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(200, 200, 200, 0),
          rgba(245, 245, 245, 0.3),
          rgba(151, 151, 151, 0)
        )
        1 1;
    }
    .mid-img {
      position: absolute;
      height: 112px;
      top: 143px;
    }
  }
}
</style>